<template>
  <div>
    <a-modal
      title="弹窗配置"
      :visible="visible"
      @ok="ok"
      @cancel="cancel"
      :maskClosable="false"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
        <a-form-item label="表单标识" class="hiddenItem">
          <a-input v-decorator="['formUuid']" />
        </a-form-item>
        <a-form-item label="按钮代码" class="hiddenItem">
          <a-input disabled v-decorator="['buttonCode']" />
        </a-form-item>
        <a-form-item label="弹窗内容">
          <a-radio-group
            v-decorator="[
              'pageType',
              {
                initialValue: this.pageType,
              },
            ]"
            @change="pageTypeChange"
          >
            <a-radio-button value="form"> 表单内容 </a-radio-button>
            <a-radio-button value="path"> 自定义页面 </a-radio-button>
          </a-radio-group>
        </a-form-item>
        <template v-if="isForm">
          <!-- 未配置系统表单渲染 -->
          <a-form-item label="表单类型" class="hiddenItem">
            <a-select
              @change="(e) => (this.formType = e)"
              v-decorator="[
                'formType',
                {
                  initialValue: this.formType,
                  rules: [{ required: true, message: '请选择表单类型' }],
                },
              ]"
            >
              <a-select-option key="custom"> 自定义表单 </a-select-option>
              <a-select-option key="system"> 系统表单 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="表单选择">
            <a-input
              @click="formSelect"
              read-only
              placeholder="请选择表单"
              v-decorator="[
                'formName',
                { rules: [{ required: true, message: '请选择表单' }] },
              ]"
            >
              <a-icon title="表单配置" slot="addonAfter" type="setting" @click="formConfig" />
            </a-input>
          </a-form-item>
        </template>
        <template v-if="isPath">
          <a-form-item label="页面地址">
            <a-input
              v-decorator="[
                'pageUrl',
                {
                  rules: [{ required: true, message: '请输入页面地址' }],
                },
              ]"
              addon-before="@/pages"
              placeholder="请输入页面地址"
            />
          </a-form-item>
        </template>
      </a-form>
    </a-modal>
    <!-- 自定义表单 -->
    <customer-form
      ref="customerFormModal"
      :visible="customerFormVisible"
      :confirmLoading="confirmLoading"
      @cancel="systemFormHandleCancel()"
      @ok="customerFormOk"
    />
    <!-- 表单配置 -->
    <form-item-config-vue
      ref="formItemConfigRef"
      :initChecked="initChecked"
      @ok="formItemOk"
    />
  </div>
</template>

<script>
import customerForm from "../customerForm.vue";
import FormItemConfigVue from './formItemConfig.vue';
import { loadAndGetFormDetail } from "./helper/index.js"
import { deepClone } from "@/utils/index.js";

export default {
  components: {
    customerForm,
    FormItemConfigVue
  },
  computed: {
    isForm() {
      const pageType = this.pageType;
      return pageType === "form";
    },
    isPath() {
      const pageType = this.pageType;
      return pageType === "path";
    },
  },
  data() {
    return {
      visible: false,
      btnGroup: [],
      form: this.$form.createForm(this, { name: "coordinated" }),
      pageType: "form",
      formType: "custom",
      customerFormVisible: false,
      systemFormVisible: false,
      btnModalConfig: {},
      confirmLoading: false,
      initChecked: true,
    };
  },
  methods: {
    openModal(config) {
      this.changeVisible(true);
      this.loadConfig(config);
      // 只允许在确定时对config 进行更新
      this.btnModalConfig = deepClone(config) || {};
    },
    changeVisible(visible) {
      this.visible = visible;
    },
    ok(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
        if (!err) {
          this.btnModalConfig.dialog = {
            ...this.btnModalConfig.dialog,
            ...values,
          };
          this.changeVisible(false);
          this.$emit("ok", this.btnModalConfig);
        }
      });
    },
    cancel() {
      this.changeVisible(false);
      this.$emit("cancel");
    },
    pageTypeChange(event) {
      const value = event.target.value;
      this.pageType = value;
      if (value == "path") {
        this.form.setFieldsValue({
          formName: "",
          formUuid: "",
        });
      }
    },
    loadConfig(config) {
      if (config?.dialog?.pageType) {
        this.pageType = config.dialog.pageType;
      } else {
        this.pageType = "form";
        config.dialog.formType = "custom";
      }
      this.$nextTick(() => {
        this.form.setFieldsValue({
          buttonCode: config.dialog.buttonCode,
          pageUrl: config.dialog.pageUrl,
          formType: config.dialog.formType || this.formType,
          formUuid: config.dialog.formUuid,
          formName: config.dialog.formName,
          pageType: config.dialog?.pageType || this.pageType,
        });
      });
    },
    formSelect() {
      let formData = this.form.getFieldsValue(["formType"]);
      if (formData.formType === "system") {
        this.systemFormVisible = true;
      } else if (formData.formType === "custom") {
        this.customerFormVisible = true;
      }
    },
    systemFormHandleCancel() {
      this.systemFormVisible = false;
      this.customerFormVisible = false;
    },
    customerFormOk(uuid, name) {
      this.confirmLoading = true;
      loadAndGetFormDetail(uuid, this.initChecked).then(res => {
        const { tableConfig } = res;
        this.setFormConfig(tableConfig);
        this.form.setFieldsValue({
          formName: name,
          formUuid: uuid,
        });
        this.confirmLoading = false;
        this.customerFormVisible = false;
      }).catch(err => {
        this.$message.error(err.message || "操作失败");
        this.confirmLoading = false;
      })
    },
    formConfig() {
      const formUuid = this.form.getFieldValue("formUuid");
      const formItemConfigs = this.btnModalConfig?.dialog?.formItemConfigs || null;
      if(formUuid) {
        this.$refs.formItemConfigRef.openModal({
          formUuid: formUuid,
          formItemConfigs: formItemConfigs,
        })
      }else{
        this.$message.warning("请先选择表单");
      }
    },
    formItemOk(configs) {
      this.setFormConfig(configs);
    },
    setFormConfig(configs) {
      this.btnModalConfig.dialog && (this.btnModalConfig.dialog.formItemConfigs = configs);
    }
  },
};
</script>

<style lang="scss" scoped></style>